import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './getPrizes.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import {AtCurtain, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtFloatLayout} from 'taro-ui';
import 'taro-ui/dist/style/components/modal.scss';
import 'taro-ui/dist/style/components/curtain.scss';
import 'taro-ui/dist/style/components/float-layout.scss';
import bg3 from '@/assets/image/rouletteGame/bg3.png';
import btn5 from '@/assets/image/rouletteGame/btn5.png';
import btn2 from '@/assets/image/rouletteGame/btn2.png';
import points from '@/assets/image/rouletteGame/points.png';
import close from '@/assets/image/rouletteGame/close.png';
import select from '@/assets/image/rouletteGame/select.png';
import selectActive from '@/assets/image/rouletteGame/select-active.png';
import btn6 from '@/assets/image/rouletteGame/btn6.png';

//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class GetPrizes extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      addressActiveIndex: null,
    };
  }

  handleSelectAddressClose() {}
  selecAddressFun(index) {
    this.setState({
      addressActiveIndex: index,
    });
  }
  render() {
    const {addressActiveIndex} = this.state;
    const {
      main: {getPrizesModel, getPrizesInfo, addAddressModel, selectAddress, addressList},
    } = this.props;
    return (
      <View className="packageCprizes">
        <AtCurtain
          // @ts-ignore
          isOpened={getPrizesModel}
          closeBtnPosition="top-right"
          onClose={() => {
            this.props.actions.action.commonChange('main.getPrizesModel', false);
          }}
        >
          <View>
            <Image className="packageCprizes-bg" src={bg3} mode="widthFix" />
            <View className="prizesBox">
              <Image
                className="prizesImg"
                src={getPrizesInfo.prizeType == 2 ? points : getPrizesInfo.imagePrize}
                mode="widthFix"
              />
              {/* <Text className="prizesType">
                {getPrizesInfo.prizeType == 0 ? '商品' : getPrizesInfo.prizeType == 1 ? '优惠券' : getPrizesInfo.prizeType == 2 ? '积分' : '再来一次'}
              </Text> */}
              <Text className="prizesType">{getPrizesInfo.prizeName}</Text>
              {getPrizesInfo.prizePoint != null && <Text className="prizesInfo">{getPrizesInfo.prizePoint}</Text>}
            </View>
            <View className="packageCprizes-btnBox">
              <Image
                className="packageCprizes-btn"
                src={btn5}
                mode="widthFix"
                onClick={() => {
                  //0商品，1优惠券，2积分，3谢谢参与，4再来一次
                  //再来一次
                  this.props.actions.action.commonChange('main.getPrizesModel', false);
                }}
              />
            </View>
          </View>
        </AtCurtain>
        {/* 以下弹窗暂不需要，未使用 */}
        <AtModal isOpened={addAddressModel}>
          <AtModalHeader>提示</AtModalHeader>
          <AtModalContent>恭喜您获得【{getPrizesInfo.prizeName}】，需要您在【我的】-【我的奖励】中领取</AtModalContent>
          <AtModalAction>
            {/* <Button
              onClick={() => {
                this.props.actions.action.commonChange('main.addAddressModel', false);
              }}
            >
              取消
            </Button> */}
            <Button
              onClick={() => {
                this.props.actions.action.commonChange('main.addAddressModel', false);
                // Taro.navigateTo({
                //   url: '/pages/package-C/prizesRecord/index',
                // });
              }}
            >
              确定
            </Button>
          </AtModalAction>
        </AtModal>

        <AtFloatLayout isOpened={selectAddress}>
          <View className="selectAddress-title">
            <Text>选择发货地址</Text>
            <Image className="closeIcon" src={close} mode="widthFix" />
          </View>
          <View className="selectAddress-con">
            <Text className="selectAddress-con-prizes">恭喜您获得【蓝月亮】商品，请选择收货地址</Text>
            <View className="selectAddress-con-list">
              {addressList.map((item, index) => {
                return (
                  <View
                    key={index}
                    className={`selectAddress-con-list-item ${
                      addressActiveIndex == index ? 'selectAddress-con-list-active' : ''
                    }`}
                    onClick={() => this.selecAddressFun(index)}
                  >
                    <Image
                      className="selectAddress-con-list-icon"
                      src={addressActiveIndex == index ? selectActive : select}
                      mode="widthFix"
                    />
                    <Text>
                      {item.provinceName}
                      {item.cityName}
                      {item.areaName}
                      {item.streetName}
                      {item.deliveryAddress}
                    </Text>
                  </View>
                );
              })}
            </View>
          </View>
          <View className="selectAddress-goAddBtnBox">
            <Image
              className="selectAddress-goAddBtnBox-Icon"
              src={btn6}
              mode="widthFix"
              onClick={() => {
                Taro.navigateTo({
                  url: '/pages/package-D/address/index',
                });
              }}
            />
          </View>
        </AtFloatLayout>
      </View>
    );
  }
}
